<!-- 会员, 查看自己的全部健康档案记录 -->
<template>
	<view>
		<cu-custom bgColor="bg-E96141" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">消费记录</block>
		</cu-custom>
		
		<!-- 分页数据 -->
		<view class="no-data-con"
			v-if="!xiaofeiList || xiaofeiList.length==0">
			<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png"></image>
			<view class="title">您还没有消费列表~</view>
		</view>
		<view class="page-list-con"
			v-if="xiaofeiList && xiaofeiList.length>0">
			<view
				v-for="(item, index) in xiaofeiList" :key="index"
				class="one-row"  @click="open(item.id)">
				<view class="left-con" style="color: #1CBBB4;">
					<view class="day-con">{{item.createTime|datafilter}}</view>
					<view class="year-month-con">{{item.createTime|datafilter2}}</view>
					<view class="opers">
						<!-- <button class="cu-btn bg-cyan round sm btn-1" @tap="toDetailPage(item)">
							<text class="title">消费列表</text>
						</button> -->
					</view>
				</view>
				
			
				
				
				<view class="right-con">
				<!-- 	<view class="title">
						<text class="account">
							[医生] {{item.doctor}}
						</text>
						<text class="name">
							[护士] {{item.nurse}}
						</text>
					</view> -->
					<view class="list-value">
						服务项目：{{item.productName?item.productName:'暂无记录'}} 
					</view>
					<view class="list-value">
						消费金额：{{item.orderAmount?item.orderAmount:'暂无记录'}} 
					</view>
					<view class="list-value">
						交易时间：{{item.createTime?item.createTime:'暂无记录'}}
					</view>
					<view class="list-value" style="color: #E96141;">
						支付状态：{{item.orderStatus==2?'支付':'未支付'}} 
					</view>
					<!-- <view class="list-value">
						日期：{{item.createTime?item.createTime:'暂无记录'}} 
					</view>
					<view class="list-value">
						诊断：{{item.zhend?item.zhend:'暂无记录'}} 
					</view> -->
				</view>
			</view>
		</view>
		<uni-load-more 
			v-if="pageDataList && pageDataList.length>0"
			:status="loadingType"></uni-load-more>
			
		<!-- 	//消费明细 -->
			<uni-popup ref="popup" :mask-click="false"  type="top" style="margin-top: 90upx;" >
				<!-- <uni-table border stripe emptyText="暂无更多数据" > -->
					<!-- 表头行 -->
				<!-- 	<uni-tr>
						<uni-th align="left" style="width:130upx;">药品图片</uni-th>
						<uni-th align="left" style="width:130upx;">药品名称</uni-th>
						<uni-th align="left" style="width: 130upx;">价格</uni-th>
						<uni-th align="left" style="width: 140upx;">数量</uni-th>
						
					</uni-tr> -->
					<!-- 表格数据行 -->
				<!-- 	<uni-tr v-for="(item,index) in yaopinlist" :key="index">
						<uni-td>
							<view :style="'background:url('+ (item.imageUrl?item.imageUrl:ciDefaultCoverImg) +') center left no-repeat;background-size: 96%;'"
						         style="height: 100upx; width: 100%; border-radius: 10rpx; position: relative; margin-bottom: 15rpx;"></view>
						</uni-td>
						<uni-td>{{item.title}}</uni-td>
						<uni-td>{{item.ylbprice}}</uni-td>
						<uni-td>{{item.num}}</uni-td>
					</uni-tr> -->
					<view  style="display: flex;flex-direction: column;width: 100%;background-color:#FFFFFF;padding: 20upx 10upx;">
						<view style="display: flex; margin: 15upx 0;">
							<text class="sub" style="flex: 2;">药品图片</text>
							<text class="sub" style="flex:1.5">药品名称</text>
							<text class="sub" style="flex:1">价格</text>
							<text class="sub" style="flex:1">数量</text>
							<text class="sub" style="flex:1">小计</text>
						</view>
						<view v-if="yaopinlist && yaopinlist.length!=0" style="display: flex;border-bottom: 3upx solid #919191;"  v-for="(item,index) in yaopinlist" :key="index">
							<text :style="'background:url('+ (item.imageUrl?item.imageUrl:ciDefaultCoverImg) +') center left no-repeat;background-size: 90%;'"
						         style="flex:2;margin: 15upx 0;height: 100upx; width: 100%; border-radius: 10rpx; position: relative; margin-bottom: 15rpx;"></text>
							<text style="flex:1.5;text-align: left;padding-top: 40upx;">{{item.title}}</text>
							<text style="flex:1;text-align: center;padding-top: 40upx;">{{item.ylbprice}}</text>
							<text style="flex:1;text-align: center;padding-top: 40upx;">{{item.num}}</text>
							<text style="flex:1;text-align: center;padding-top: 40upx;">{{item.num*parseFloat(item.ylbprice)}}</text>
						</view>
						<view style="display: flex;color: red;font-weight: 400;"  v-if="yaopinlist && yaopinlist.length!=0">
							<view style="flex:2"></view>
							<view style="flex:3;" >合   计</view>
							<view style="flex:1"></view>
							<view style="flex:1">{{tnum}}</view>
							<view style="flex:1">{{total.toFixed(2)}}</view>
						</view>
						<view  v-if="yaopinlist.length==0" style="text-align: center;">
							<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png" style="width: 200upx;height: 200upx;"></image>
							<view >您还没有消费列表~</view>
						</view>
					</view>
					
				
				</uni-table>
				<button @click="close">关闭</button>
			</uni-popup>
	</view>
</template>

<script>
	import {
		USER_HAS_LOGIN,
	} from "@/common/util/constants"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import moment from 'moment'
	
	export default {
		name: "xiaofei",
		components: {
			uniLoadMore,uniPopup
		},
		props:{
			pageCur: String ,
		},
		filters:{
			datafilter(d){
				return d.slice(9,10)				
			},
			datafilter2(d){
				var y=d.slice(0,4)
				var m=d.slice(6,7)				
				return y + "年" + m + "月"	
			
			}
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				ciDefaultCoverImg:'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/check-item-v2-noimage.jpg',
				pageDataList: [
					
				],
				yaopinlist: [],
				xiaofeiList: [],
				keyword: '',
				currPageNo: 1,
				totalPageNo: 1,
				pageSize: 10,
				phone: '',
				total:0,
				tnum:0,
			}
		},
		created() {
			this.validUserInfo()
			this.loadData()
			// console.info(this.$route)
		},
		onLoad(options) {
			// var phone=options.phone;
			// console.log(phone);
			// this.phone=phone;
		},
		methods: {
			//计算消费总价
			zprice(arr){
				this.tnum=0
				this.total=0
				arr.forEach(item=>{
					this.total=this.total+(parseInt(item.num)*parseFloat(item.ylbprice))
					this.tnum=this.tnum+parseInt(item.num)
				})
			},
			getxfmx(id){		
			this.yaopinlist=[]
			
			let that=this
			this.$http.get('http://47.97.211.24:9092/order/chaxun?type=2&orderid='+id)
				.then(res=>{
					console.log(res.data)
					console.log(444)
					let r=res.data
					r.forEach(item=>{
						let i={}
						i.num=item.num
						i.title=item.title
						i.imageUrl=item.imageUrl
						i.ylbprice=item.ylbprice
						that.yaopinlist.push(i)
					})
						this.zprice(that.yaopinlist)
				})
			
			},
			open(id){
				this.getxfmx(id)
				this.$refs.popup.open('top')
				
			 },
			 close() {
				this.$refs.popup.close()
			},
			// 用户信息
			validUserInfo(){
				this.userHasLogin = uni.getStorageSync(USER_HAS_LOGIN)
				if(this.userHasLogin!='1'){
					this.$tip.toast('登录超时');
					let app_must_permission_status = uni.getStorageSync('APP_MUST_PERMISSION_STATUS')
					uni.clearStorageSync();
					uni.setStorageSync('APP_MUST_PERMISSION_STATUS', app_must_permission_status)
					setTimeout(function() {
						uni.redirectTo({
						    url: '/pages/login/login'
						});
					}, 500);
					return false
				}
			},
			//查看详情
			toDetailPage(item){
				if(!item.id){
					this.$tip.toast('数据错误')
					return false
				}
				let _params = '?nouse=1' +
					'&id=' + item.id + 
					'&createDate=' + item.createTimeShort + '&phone=' + item.phone + '&name=' + item.name + '&sex=' + item.sex + '&age=' + item.age + '&createTime=' + item.createTime + '&zhend=' + item.zhend + '&image=' + item.image 
				uni.navigateTo({
					// url: '/pages/member-health-record/detail' + _params
					url: '/pages/chufang/chufangdetail' + _params
				})
			},
			onPageScroll(e){
				//兼容iOS端下拉时顶部漂移
				if(e.scrollTop>=0){
					this.headerPosition = "fixed";
				}else{
					this.headerPosition = "absolute";
				}
			},
			//下拉刷新
			onPullDownRefresh(){
				this.loadData('refresh');
			},
			//加载更多
			onReachBottom(){
				this.loadData();
			},
			//分页加载 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				let that = this
				//没有更多直接返回
				if(type === 'add'){
					if(that.loadingType === 'nomore'){
						return;
					}
					that.loadingType = 'loading';
				}else if(type === 'refresh'){
					that.pageDataList = []
					that.currPageNo = 1
				}else{
					that.loadingType = 'more'
				}
				if(that.currPageNo>that.totalPageNo){
					that.loadingType = 'nomore'
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
					return false
				}
				
				// let _pageParams = {
				// 	id: '',
				
					
				// }
				// let list = await that.$http.get('/health/jkda/listformem', {params:_pageParams})
				let list = await that.$http.get('/orderinfo/orders/queryBytoken')
					.then(res => {
						if(res.data.success){
							//uni.hideLoading()
							let jsonData = res.data.result.records
							that.xiaofeiList=jsonData
							console.log(that.xiaofeiList)
							if(!jsonData){
								return []
							}
							that.totalPageNo = jsonData.pages
							let _list = jsonData.records?jsonData.records:[]
							if(_list && _list.length>0){
								let _item = {}
								for(let i=0;i<_list.length;i++){
									_item = _list[i]
									_item.createTimeShort = moment(_item.createTime).format('YYYY-M-D')
									_item.day = moment(_item.createTime).format('D')
									_item.yearMonth = moment(_item.createTime).format('YYYY年M月')
								}
							}
							return _list
						}else{
							//uni.hideLoading()
						}
					}).catch(err => {
						//uni.hideLoading()
						return []
					});
				
				if(list && list.length>0){
					list.forEach(item=>{
						that.pageDataList.push(item)
					})
				}
				
				//判断是否还有下一页，有是more  没有是nomore
				that.loadingType  = (that.currPageNo >= that.totalPageNo)?'nomore':'more'
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
				
				if(that.currPageNo<that.totalPageNo){
					that.currPageNo++
				}
			},
			stopPrevent(){
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sub{
		text-align: center;
		background-color: #1CBBB4;
		color:#FFFFFF;		
		border-radius: 15upx;
		padding: 10upx;
		
		margin-left: 10upx;
	}
	
	/* 分页列表 */
	.space-line{
		width: 100%;
		height: 180px;
	}
	.no-data-con{
		text-align: center;
		padding: 30% 0 0 0;
		image{
			width: 150px !important;
			height: 150px !important;
		}
		.title{
			color: #aaaaaa;
		}
	}
	.page-list-con{
		padding: 20upx;
		color: #999999;
		.one-row{
			width: 100%;
			height: 190upx;
			overflow: hidden;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			padding: 20upx;
			border-radius: 10upx;
			border: 1px solid #ececec;
			.left-con{
				width: 30%;
				float: left;
				text-align: center;
				border-right: 1px dashed #cccccc;
				.day-con{
					font-size: 80upx;
					font-weight: bold;
				}
				.year-month-con{
					font-size: 32upx;
					margin-bottom: 10upx;
				}
				.opers{
					font-size: 48upx;
					text{
						font-size: 24upx;
					}
					.btn-1{
						width: 85%;
						background-color: #ff9270;
						height: 56upx;
						line-height: 56upx;
						margin-bottom: 10upx;
					}
				}
			}
		
			.right-con{
				width: 68%;
				float: right;
				border: 0px solid #f00;
				height: 360upx;
				overflow: hidden;
				.title{
					font-size: 26upx;
					font-weight: bold;
					margin-bottom: 10upx;
					height: 50upx;
					line-height: 50upx;
					.account{
						margin-right: 10upx;
						color: #1CBBB4;
					}
					.name{
						float: right;
						color: #EA6040;
					}
				}
				.list-value{
					margin-bottom: 5upx;
				}
			}
		}
		
	}
	

</style>
